<template>
  <view class="store_page">
    <u-card
      class=""
      :title="cartTitle"
      :title-color="`#fff`"
      :head-style="cartStyle[1]"
      :foot-style="cartStyle[1]"
    >
      <view class="" slot="body">
        <view class="u-body-item u-flex u-border-bottom">
          <view class="left">
            <u-icon name="map" size="40"></u-icon>
            地址： {{ store_info.store_address }}
          </view>
        </view>
      </view>
    </u-card>

    <u-card
      class=""
      :title="cartTitle"
      :title-color="`#fff`"
      :head-style="cartStyle[1]"
      :foot-style="cartStyle[1]"
    >
      <view class="" slot="body">
        <view class="u-body-item u-flex u-border-bottom">
          <view class="left">
            <u-icon name="file-text" size="40"></u-icon>
            起送价格： {{ store_info.min_price }} 元
          </view>
        </view>
        <view class="u-body-item u-flex u-border-bottom">
          <view class="left">
            <u-icon name="file-text" size="40"></u-icon>
            配送服务： 商家配送，可预约时间。
          </view>
        </view>
        <view class="u-body-item u-flex u-border-bottom">
          <view class="left">
            <u-icon name="clock" size="40"></u-icon>
            配送时间： {{ store_info.work_time }}
          </view>
        </view>
      </view>
    </u-card>

    <u-card
      class=""
      :title="cartTitle"
      :title-color="`#fff`"
      :head-style="cartStyle[1]"
      :foot-style="cartStyle[1]"
    >
      <view class="" slot="body">
        <view class="u-body-item u-flex u-border-bottom">
          <view class="left"> 商家公告 </view>
        </view>
        <view class="u-body-item u-flex u-border-bottom">
          <view class="left">
            {{ store_info.announcement }}
          </view>
        </view>
      </view>
    </u-card>

    <!-- 历史评价card  -->
    <u-card
      class=""
      :title="cartTitle"
      :title-color="`#fff`"
      :head-style="cartStyle[1]"
      :foot-style="cartStyle[1]"
    >
      <view class="" slot="body">
        <view class="u-body-item u-flex u-border-bottom">
          <view class="left"> 历史评价 </view>
        </view>
        <view class="u-body-item u-flex">
          <view class="left">
            <text
              class="mr-10 tag"
              :class="{ tagActive: commitIndex == 0 }"
              @tap="commitIndex = 0"
              >好评</text
            >
            <text
              class="mr-10 tag"
              :class="{ tagActive: commitIndex == 1 }"
              @tap="commitIndex = 1"
              >有图</text
            >
             <text
              class="mr-10 tag"
              :class="{ tagActive: commitIndex == 2 }"
              @tap="commitIndex = 2"
              >差评</text
            >
          </view>
        </view>
        <view class="box" v-if="commitIndex == 0">
          <view
            class="u-body-item u-flex u-border-bottom commit_item"
            v-for="c in historyCommitsListHighScore"
            :key="c.id"
          >
            <view class="left">
              <view class="name"> 匿名用户: {{ c.sensitiveUsername }} </view>
              <view class="commit_content">
                {{ c.content }}
              </view>
              <view class="rate_and_time_flex_item">
                <view class="rate">
                  <text class="rate_titme"> 服务评价: </text>
                  <u-rate v-model="c.score" disabled></u-rate>
                </view>
                <text>
                  {{ c.createTime }}
                </text>
              </view>
            </view>
          </view>
        </view>
        <view class="box" v-else-if="commitIndex == 1">
          <view
            class="u-body-item u-flex u-border-bottom commit_item"
            v-for="c in historyCommitsListHasImage"
            :key="c.id"
          >
            <view class="left">
              <view class="name"> 匿名用户: {{ c.sensitiveUsername }} </view>
              <view class="commit_content">
                {{ c.content }}
              </view>
              <view class="commit_img">
                <!-- <img src="" alt=""> -->
                <img
                  :src="c_img"
                  alt=""
                  v-for="(c_img, index) in commitImgList(c)"
                  :key="index"
                />
              </view>
              <view class="rate_and_time_flex_item">
                <view class="rate">
                  <text class="rate_titme"> 服务评价: </text>
                  <u-rate v-model="c.score" disabled></u-rate>
                </view>
                <text>
                  {{ c.createTime }}
                </text>
              </view>
            </view>
          </view>
        </view>
        <view class="no_more"> 没有更多评价了~ </view>
      </view>
    </u-card>
  </view>
</template>

<script>
export default {
  name: "store-detail",
  data() {
    return {
      //   cartTitle: {},
      cartTitle: "商家信息",
      store_info: {}, // 从 store  获取的 商家信息
      historyCommitsList: [], // 历史评价

      historyCommitsListHighScore: [],
      historyCommitsListHasImage: [],
      historyCommitsListLowScore:[],

      commitIndex: 0, // 0 1   ： 好评 、 有图
    };
  },

  async mounted() {
    this.init();
    this.store_info = Object.assign({}, this.$store.state.store);
  },
  components: {},
  computed: {
    cartStyle() {
      return [
        { "background-image": "linear-gradient(45deg,blue,#fff)" },
        {
          display: "none",
        },
        {},
      ];
    },
    // 历史评价 used
    commitImgList() {
      return (c) => {
        let _imglist = [];
        if (c.imgUrls) {
          c.imgUrls.split(";").forEach((element) => {
            if (element.length) {
              _imglist.push(element);
            }
          });
        }
        return _imglist;
      };
    },
    historyCommitsListAll() {},
    // 历史评价 end
  },
  methods: {
    init() {
      let that = this;
      that.setHistoryCommit();
    },

    // setHistoryCommit
    setHistoryCommit() {
      let that = this;
      let p = {
        tag: " ",
      };
      that.$u.api.getStoreAllCom(p).then((res) => {
        console.log(res);
        that.historyCommitsList = res.list;
      });
      that.$u.api
        .getStoreAllCom({
          tag: "highScore",
        })
        .then((res) => {
          that.historyCommitsListHighScore = res.list;
        });
      that.$u.api
        .getStoreAllCom({
          tag: "lowScore",
        })
        .then((res) => {
          console.log("cp");
          console.log(res);
          // that.historyCommitsListLowScore = res.list;
        });

      that.$u.api
        .getStoreAllCom({
          tag: "hasImage",
        })
        .then((res) => {
          that.historyCommitsListHasImage = res.list;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/pages/pay/pay.scss";
@import "./store-detail.scss";
</style>
